<template>
  <div class="st">
    <ul class="sorts">
      <li v-for="(item, index) in sortList" :key="item.id">
        <img :src="item.imgUrl" alt="" />
        <span>{{ item.title }}</span>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getSortListApi } from "@/utils/api/api.js";
const sortList = ref([]);
const getSortList = async () => {
  await getSortListApi().then(({ data }) => {
    sortList.value = data.data;
  });
};
onMounted(() => {
  getSortList();
});
</script>
<style lang="less" scoped>
.st {
  position: absolute;
  top: 61px;
  width: 100%;
}
.sorts {
  position: relative;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  padding: 10px 0;
  background-color: #fff;

  li {
    display: flex;
    flex-direction: column;
    flex: 0 0 20%;
    align-items: center;
    img {
      width: 70px;
      height: 70px;
    }
    span {
      font-size: 16px;
    }
  }
}
</style>
